<!DOCTYPE html>
<html>
<head>
  <title>可移动可删除列表</title>
  <style>
    .dragging {
      background-color: lightblue;
    }

    .below {
      border-bottom: 2px solid blue;
    }
  </style>
</head>
<body>
  <h1>可移动可删除列表</h1>
  <ul id="list">
    <li class="item">项目 1
      <button class="move-up-btn">上移</button>
      <button class="move-down-btn">下移</button>
      <button class="delete-btn">删除</button>
    </li>
    <li class="item">项目 2
      <button class="move-up-btn">上移</button>
      <button class="move-down-btn">下移</button>
      <button class="delete-btn">删除</button>
    </li>
    <li class="item">项目 3
      <button class="move-up-btn">上移</button>
      <button class="move-down-btn">下移</button>
      <button class="delete-btn">删除</button>
    </li>
  </ul>

  <button id="add-item-btn">添加项目</button>

  <script>
    // 添加项目按钮
    const addItemBtn = document.getElementById("add-item-btn");
    addItemBtn.addEventListener("click", () => {
      const name = prompt("请输入新项目的名称：");
      if (name) {
        const newItem = document.createElement("li");
        newItem.classList.add("item");
        newItem.textContent = name;

        const moveUpBtn = document.createElement("button");
        moveUpBtn.classList.add("move-up-btn");
        moveUpBtn.textContent = "上移";
        moveUpBtn.addEventListener("click", () => moveItemUp(newItem));

        const moveDownBtn = document.createElement("button");
        moveDownBtn.classList.add("move-down-btn");
        moveDownBtn.textContent = "下移";
        moveDownBtn.addEventListener("click", () => moveItemDown(newItem));

        const deleteBtn = document.createElement("button");
        deleteBtn.classList.add("delete-btn");
        deleteBtn.textContent = "删除";
        deleteBtn.addEventListener("click", () => deleteItem(newItem));

        newItem.appendChild(moveUpBtn);
        newItem.appendChild(moveDownBtn);
        newItem.appendChild(deleteBtn);
        list.appendChild(newItem);
      }
    });

    // 获取所有项目、上移按钮、下移按钮和删除按钮
    const items = document.querySelectorAll(".item");
    const moveUpBtns = document.querySelectorAll(".move-up-btn");
    const moveDownBtns = document.querySelectorAll(".move-down-btn");
    const deleteBtns = document.querySelectorAll(".delete-btn");

    // 允许项目拖放
    items.forEach((item) => {
      item.addEventListener("dragstart", (e) => {
        e.target.classList.add("dragging");
      });

      item.addEventListener("dragover", (e) => {
        e.preventDefault();
        const draggingItem = document.querySelector(".dragging");
        if (e.target.classList.contains("item") && e.target !== draggingItem) {
          const rect = e.target.getBoundingClientRect();
          const midY = rect.top + rect.height / 2;
          e.target.classList.toggle("below", e.clientY > midY);
        }
      });

      item.addEventListener("drop", (e) => {
        e.preventDefault();
        const draggingItem = document.querySelector(".dragging");
        draggingItem.classList.remove("dragging");

        const belowElement = document.querySelector(".below");
        belowElement.classList.remove("below");

        if (belowElement) {
          list.insertBefore(draggingItem, belowElement.nextSibling);
        } else {
          list.appendChild(draggingItem);
        }
      });
    });

    // 上移项目
    function moveItemUp(item) {
      const previousItem = item.previousElementSibling;
      if (previousItem) {
        list.insertBefore(item, previousItem);
      }
    }

    // 下移项目
    function moveItemDown(item) {
      const nextItem = item.nextElementSibling;
      if (nextItem) {
        list.insertBefore(nextItem, item);
      }
    }

    // 删除项目
    function deleteItem(item) {
      if (confirm("确定要删除此项目吗？")) {
        item.remove();
      }
    }

    // 允许项目删除
    deleteBtns.forEach((btn, index) => {
      btn.addEventListener("click", () => deleteItem(items[index]));
    });

    // 允许项目上移
    moveUpBtns.forEach((btn, index) => {
      btn.addEventListener("click", () => moveItemUp(items[index]));
    });

    // 允许项目下移
    moveDownBtns.forEach((btn, index) => {
      btn.addEventListener("click", () => moveItemDown(items[index]));
    });
  </script>
</body>
</html>